<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .d1{
      width: 200px;
      height: 200px;
      background-color: lightgreen;
      border: 5px solid #0f0;
        /*设置圆角*/
        border-radius: 30px;
    }

    .d2{
        /* 胶囊状  */
        width: 200px;
        height: 60px;
        background-color: blue;
        border-radius: 30px;
    }
    .d3{
        width: 200px;
        height: 100px;
        background-color: red;
        border-radius: 100px/50px;
    }
    .d4
    {
        width: 200px;
        height: 200px;
        background-color: lightcoral;
        border: 10px solid #000;
        padding-left: 50px;
        /* margin 会占用页面空间 但不会算入元素本身大小 270 × 220  */
        margin: 30px;
        /*切换模型盒子的计算方案：边框与那边据都包含在预设的高宽之内  通过压缩内容实现的*/
        box-sizing: border-box;
    }

    .d5
    {
        height: 300px;
        width: 100px;
        background-color: black;
        border-radius: 150px/50px;
    }
    span
    {
        border: 2px solid #ff0000;
    }

    .s2{
        /* 行内元素 上下margin不会生效  */
        /*margin: 30px;*/
        /*垂直方向上，内间距也不生效*/
        padding:50px;
    }
  </style>
</head>
<body>

<span>span</span><span><span class="s2">span</span><span>span</span>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</body>
</html>